<template>
  <div class="home">
    <!-- 头部标题 -->
    <cnp></cnp>
    <!-- 头部标题结束 -->
    <!-- 经营概况开始 -->
    <div class="home-manage common">
      <p class="common-title">
        <span>经营概况</span>
        <img src="../assets/h1.png" alt />
      </p>
      <div class="jy-wrap">
        <div class="jy-box con1">
          <div class="jy-box-img">
            <img src="../assets/h2.png" alt />
          </div>
          <div class="jy-box-right">
            <p>今日参加活动人次</p>
            <span>18</span>
          </div>
        </div>
        <div class="jy-box con2">
          <div class="jy-box-img">
            <img src="../assets/h3.png" alt />
          </div>
          <div class="jy-box-right">
            <p>今日活动收入</p>
            <span>￥2330.00</span>
          </div>
        </div>
        <div class="jy-box con3">
          <div class="jy-box-img">
            <img src="../assets/h2.png" alt />
          </div>
          <div class="jy-box-right">
            <p>今日课程订单数</p>
            <span>18</span>
          </div>
        </div>
        <div class="jy-box con4">
          <div class="jy-box-img">
            <img src="../assets/h3.png" alt />
          </div>
          <div class="jy-box-right">
            <p>今日课程订单收入</p>
            <span>￥2330.00</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 经营概况结束 -->
    <!-- 代办事项开始 -->
    <div class="home-manage common">
      <p class="common-title">
        <span>待办事项</span>
        <img src="../assets/h1.png" alt />
      </p>
      <!-- 代办事项的主要内容 -->
      <div class="db-wrap">
        <!-- 待付款 -->
        <div class="db-box">
          <div class="db-box-con">
            <img src="../assets/d1.png" />
            <div class="db-box-conr">
              <p>12</p>
              <router-link to="/orderForm">待付款订单</router-link>
            </div>
          </div>
          <div class="db-box-con"></div>
          <div class="db-box-con"></div>
        </div>
        <!-- 待确认 -->
        <div class="db-box">
          <div class="db-box-con">
            <img src="../assets/d2.png" class="db-img" />
            <div class="db-box-conr">
              <p>12</p>
              <router-link to="/service">待确认订单</router-link>
            </div>
          </div>
          <div class="db-box-con"></div>
          <div class="db-box-con"></div>
        </div>
        <!-- 待回复 -->
        <div class="db-box bor">
          <div class="db-box-con">
            <img src="../assets/d3.png" alt />
            <div class="db-box-conr">
              <p>12</p>
              <router-link to="/orderForm">待回复客户</router-link>
            </div>
          </div>
          <div class="db-box-con"></div>
          <div class="db-box-con"></div>
        </div>
      </div>
    </div>
    <!-- 代办事项结束 -->
    <!-- 收入趋势开始 -->
    <div class="srqs common">
      <p class="common-title">
        <span>收入趋势</span>
        <img src="../assets/h7.png" alt />
      </p>
      <div class="srqs-wrap">
        <div style="width:980px;height:380px;" ref="chart"></div>
      </div>
    </div>
    <!-- 收入趋势结束 -->
  </div>
</template>

<script>
import cnp from "../components/biaoti";
export default {
  name: "Home",
  components: {
    cnp,
  },
  methods: {
    initCharts() {
      let myChart = this.$echarts.init(this.$refs.chart);
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {},
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "",
              "08-01",
              "08-02",
              "08-03",
              "08-04",
              "08-05",
              "08-06",
              "08-07",
              "08-08",
              "08-09",
              "08-10",
              "08-11",
              "08-12",
              "",
            ],
          },
        ],
        yAxis: [
          {
            name: "单位:元",
            type: "value",
          },
        ],
        series: [
          {
            type: "line",
            smooth: true,
            stack: "价格",
            areaStyle: {},
            data: [
              "",
              7000,
              6900,
              9500,
              14500,
              18400,
              21500,
              25000,
              26000,
              23300,
              18300,
              13900,
              9600,
              "",
            ],
          },
        ],
      });
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

<style>
.home {
  margin: 0 auto;
  width: 1140px;
  height: 100%;
}
.common {
  margin-left: 20px;
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.common-title {
  padding: 20px;
}
.common-title span {
  margin-right: 10px;
}
.home-manage {
  height: 215px;
  margin-bottom: 12px;
}
.jy-wrap {
  display: flex;
  justify-content: space-between;
  padding: 10px 50px;
}
.jy-box {
  display: flex;
  width: 210px;
  height: 103px;
  border-radius: 6px;
  padding-left: 16px;
  cursor: pointer;
}
.jy-box:hover{
  opacity: .8;
}
.jy-box-img {
  width: 44px;
  height: 44px;
  margin-top: 30px;
}
.con2 .jy-box-img,
.con4 .jy-box-img {
  width: 64px;
}
.jy-box-img img {
  width: 100%;
  height: 100%;
}
.con1 .jy-box-right,
.con3 .jy-box-right {
  margin-left: 20px;
}
.jy-box-right p {
  margin: 26px 0 6px 0;
  color: #fff;
  font-size: 14px;
  font-family: "思源黑体";
}
.jy-box-right span {
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 26px;
  color: #ffffff;
}
.con2 span,
.con4 span {
  font-size: 20px;
}
.con1 {
  background: linear-gradient(
    325deg,
    rgba(153, 0, 255, 1) 0%,
    rgba(153, 0, 255, 1) 0%,
    rgba(153, 153, 255, 1) 100%,
    rgba(153, 153, 255, 1) 100%
  );
}
.con2 {
  background: linear-gradient(
    325deg,
    rgba(255, 102, 153, 1) 0%,
    rgba(255, 102, 153, 1) 0%,
    rgba(255, 204, 153, 1) 100%,
    rgba(255, 204, 153, 1) 100%
  );
}
.con3 {
  background: linear-gradient(
    225deg,
    rgba(255, 204, 102, 1) 0%,
    rgba(255, 204, 102, 1) 0%,
    rgba(248, 216, 0, 1) 100%,
    rgba(248, 216, 0, 1) 100%
  );
}
.con4 {
  background: linear-gradient(
    225deg,
    rgba(144, 247, 236, 1) 0%,
    rgba(144, 247, 236, 1) 0%,
    rgba(50, 204, 188, 1) 100%,
    rgba(50, 204, 188, 1) 100%
  );
}
.db-wrap {
  margin-top: 24px;
}
.db-box {
  float: left;
  border-right: 1px solid #ccc;
  margin-left: 20px;
  padding: 0px 50px;
}
.bor {
  border-right: 0;
}
.db-box-con {
  display: flex;
}
.db-box-conr {
  margin-left: 12px;
}
.db-box-con p {
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}
.db-box-conr a {
  text-decoration: none;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #666666;
}
.db-img {
  width: 56px;
  height: 56px;
}
.srqs {
  height: 480px;
}
.srqs-wrap {
  margin: 0px 40px;
}
</style>
